<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>专家技术</el-breadcrumb-item>
				<el-breadcrumb-item>培训班</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">培训班列表</div>
				<div>
					<el-button type="primary" size="mini" class="topButton" round @click="addCultivate">新增</el-button>
				</div>
			</div>
			<div v-if="trainingList && trainingList.length > 0">
				<ul class="dataUl">
					<li class="dataLi flex" style="justify-content: space-between;" v-for="item in trainingList" :key="item.trainingClassId">
						<div class="flex" style="justify-content: space-between;">
							<el-image v-if="item.photo" class="liImage" :src="item.photo" fit="cover"></el-image>
							<div v-else class="liImage imgText">{{ item.startDate }}</div>
							<div>
								<p class="titleName">主题：{{ item.theme }}</p>
								<div class="flex" style="justify-content: space-between;">
									<div>
										<p class="msgList">培训时间：{{ item.startDate }} 至 {{ item.endDate }}</p>
										<p class="msgList">培训地点：{{ item.address }}</p>
										<p class="msgList">专家成员：{{ item.experts }}</p>
										<p class="msgList">关键词：{{ item.keyWord }}</p>
									</div>
									<div>
										<p class="msgList flex" style="align-items: center;">评价星级：<el-rate v-model="item.evaluate" disabled text-color="#F6AF15"></el-rate></p>
										<p class="msgList">学员人数：{{ item.actualNumber?item.actualNumber:0 }}人</p>
										<p class="msgList">评论条数：{{ item.comments?item.comments:0 }}条</p>
										<p class="msgList">点击数量：{{ item.point?item.point:0 }}</p>
									</div>
								</div>
							</div>
						</div>
						<el-button type="primary" @click="clickItems(item.trainingClassId)" v-if="item.status==0">报名中</el-button>
						<el-button type="warning" @click="clickItems(item.trainingClassId)" v-else-if="item.status==0">进行中</el-button>
						<el-button type="success" @click="clickItems(item.trainingClassId)" v-else>已完成</el-button>
					</li>
				</ul>
				<pagina-tion :totalNum="0" @paginaClick="paginaClick"></pagina-tion>
			</div>
			
			<noData v-else></noData>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				rateValue: 3.7,
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				trainingList: '' ,// 培训班列表
				queryData: {
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				}
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			
			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
				
				
				this.getAllClassList()

		},
		watch: {


		},
		methods: {
			paginaClick(val){
				this.queryData.page = val
				this.getAllClassList()
			},
			clickItems(id){
				// 点击列表
				this.$router.push(`/entrance/cultivateschool/cultivatespecialist/${id}`)
			},
			addCultivate(){
				// 新增
				this.$router.push('/entrance/cultivateschool/addcultivate')
			},
			getAllClassList(){
				// 获取培训班列表
				this.queryData.companyId = this.companyId
				this.$request.postForm(this.$api.getAllClass, this.queryData).then(res=>{
					if(res.code == 200){
						this.trainingList = res.data.items
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		/* margin-bottom: 20px; */
		/* margin-top: 20px; */
	}
	.topButton{
		width: 78px;
	}
	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
	.dataUl,.dataLi{
		width: 100%;
	}
	.dataLi{
		padding: 20px 0;
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
		align-items: center;
	}
	.dataIsActive{
		background: #FAFAFA;
	}
	.liImage{
		width: 140px;
		height: 100px;
		margin-right: 20px;
	}
	.imgText{
		text-align: center;
		line-height: 100px;
		font-size: 16px;
		color: #333333;
		font-weight: 400;
	}
	.el-button--small{
		height: 36px;
		width: 110px;
	}
	.titleName{
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		width: 550px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* margin-bottom: 30px; */
	}
	.titleName span{
		margin-right: 35px;
	}
	.msgList{
		color: #454545;
		font-size: 12px;
		line-height: 21px;
		width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
